<template>
  <v-container fluid fill-height>
    <v-row fill-height>
      <v-col cols="9">
        <v-card flat>
          <v-card-title v-text="'视频课件'" />
          <v-layout justify-center align-center>
            <iframe
              src="//player.bilibili.com/player.html?aid=75424673&bvid=BV1pE411e7DF&cid=129020822&page=17"
              allowfullscreen="allowfullscreen"
              width="100%"
              height="500"
              scrolling="no"
              frameborder="0"
              sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
            ></iframe>
          </v-layout>
        </v-card>
      </v-col>
      <v-col cols="3">
        <v-row>
          <v-card scrollable outlined height="100%" width="100%">
            <v-list>
              <v-subheader>课件列表 - 可以添加、删除课件</v-subheader>
              <v-list-item-group color="primary">
                <v-list-item v-for="video in videos" :key="video" link>
                  <v-list-item-title v-text="video" />
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-card>
        </v-row>
      </v-col>
    </v-row>
    <statistic-graph />
  </v-container>
</template>
<script>
import StatisticGraph from "../components/StatisticGraph.vue";

export default {
  components: {
    StatisticGraph
  },
  data: () => ({
    videos: ["课件1", "课件2", "课件3"]
  })
};
</script>
